<!-- 
  // 单元格宽度配置 props: tableCellWidth [{prop: "", width: ""}]
  // 表格对齐方式配置 props: tableCellAlign [{prop: "", align: ""}]
  // 表格展示tooltip配置 props: tableShowTooltip [{prop: "", showTooltip: ""}]
 -->
<template>
  <div class="table_">
    <el-table
      ref="table"
      :data="tableData_"
      style="width: 100%"
      :span-method="arraySpanMethod"
      :stripe="isStripe"
      :border="isBorder"
      :height="minHeight"
      :header-cell-style="headerCellStyle"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        type="index"
        label="序号"
        :index="indexMethod"
        width="50"
        align="center"
        v-if="tableIsShowSerial"
      >
      </el-table-column>

      <el-table-column label="icon" align="center" width="50" v-if="firstIconObj.isOpen">
        <template slot="header">
          <i :class="firstIconObj.icon + ' ' + firstIconObj.color"></i>
        </template>
        <template>
          <i :class="firstIconObj.icon + ' ' + firstIconObj.color"></i>
        </template>
      </el-table-column>

      <el-table-column
        type="selection"
        align="center"
        v-if="tableIsShowCheckbox"
      ></el-table-column>
      <template v-for="(item, index) in tableColumn_">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :show-overflow-tooltip="item.showTooltip || true"
          :width="item.width || 'auto'"
          :align="item.align || 'left'"
        >
          <template slot-scope="scope">
            <slot v-if="item.slot" :name="item.prop" :row="scope.row"></slot>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column
        v-if="tableEdit.isShowEdit || false"
        :label="tableEdit.label || '操作'"
        :width="tableEdit.widthEdit || 'auto'"
        :fixed="tableEdit.fixed || 'right'"
        :align="tableEdit.align || 'left'"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in tableEdit.tableEditArr"
            :key="index"
            :type="item.type || 'text'"
            :icon="item.icon || ''"
            @click="handleEditFn(scope, item)"
          >
            {{ item.text }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" v-if="tableShowPagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationObj.page || 1"
        :total="paginationObj.total || 0"
        :page-size="paginationObj.size || 10"
        :page-sizes="paginationObj.sizes || [10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>
  <script>
export default {
  name: "Table",
  props: {
    // 是否开启表格第一列自定义
    firstIconObj: {
      type: Object,
      default: ()=>{
        return {
          isOpen: false,
          icon: "",
          color: ""
        }
      }
    },
    // 表格高度
    minHeight: {
      type: Number,
      default: 230,
    },
    // 表格网状
    isStripe: {
      type: Boolean,
      default: true,
    },
    // 表格边框
    isBorder: {
      type: Boolean,
      default: true,
    },
    // 表头信息
    tableColumn: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格内容
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 是否显示序号
    tableIsShowSerial: {
      type: Boolean,
      default: true,
    },
    // 是否显示复选框
    tableIsShowCheckbox: {
      type: Boolean,
      default: false,
    },
    // 表格宽度配置
    tableCellWidth: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格对齐方式配置
    tableCellAlign: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格展示tooltip配置
    tableShowTooltip: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 操作一栏配置
    tableEdit: {
      type: Object,
      default: () => {
        return {
          isShowEdit: false,
          width: "auto",
          fixed: "right",
          label: "操作",
          align: "left",
          tableEditArr: [
            {
              icon: "",
              text: "",
              type: "",
            },
          ],
        };
      },
    },
    // 显示分页器
    tableShowPagination: {
      type: Boolean,
      default: false,
    },
    paginationObj: {
      type: Object,
      default: () => {
        return {
          page: 1,
          size: 10,
          total: 0,
          sizes: [10, 20, 50, 100],
        };
      },
    },
    headerCellStyle_: {
      type: Object,
      default: () => {
        return {
          // textAlign: "center",
        };
      },
    },
    // 开启单选
    isRadio: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    tableColumn: {
      handler(newVal) {
        if (newVal.length) {
          // 单元格宽度配置
          this.tableCellWidth.length &&
            this.tableCellWidth.forEach((item) => {
              newVal.forEach((item_) => {
                if (item.prop == item_.prop) {
                  item_.width = item.width;
                }
              });
            });
          // 单元格对齐方式配置
          this.tableCellAlign.length &&
            this.tableCellAlign.forEach((item) => {
              newVal.forEach((item_) => {
                if (item.prop == item_.prop) {
                  item_.align = item.align;
                }
              });
            });
          // 表格展示tooltip配置
          this.tableShowTooltip.length &&
            this.tableShowTooltip.forEach((item) => {
              newVal.forEach((item_) => {
                if (item.prop == item_.prop) {
                  item_.showTooltip = item.showTooltip;
                }
              });
            });

          this.tableColumn_ = newVal;
          this.tableData_ = this.tableData;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      // 基础数据
      tableColumn_: [],
      tableData_: [],
    };
  },
  mounted() {},
  methods: {
    // 表格控制所在行的背景颜色显示
    tableRowClassName({ rowIndex }) {
      // console.log(row);
      if (rowIndex === 3) {
        return "success-row";
      } else if (rowIndex === 5) {
        return "success-row";
      }
      return "";
    },
    // 复选框实现多选单选功能
    handleSelectionChange(val) {
      if (val.length > 1 && this.isRadio) {
        const arr = val.filter((item, index) => {
          if (index == val.length - 1) {
            this.$refs.table.toggleRowSelection(item, true);
            return true;
          } else {
            this.$refs.table.toggleRowSelection(item, false);
            return false;
          }
        });
        this.$emit("handleSelectionChange", arr);
      } else {
        this.$emit("handleSelectionChange", val);
      }
    },
    headerCellStyle() {
      return this.headerCellStyle_;
    },
    // 列表序号索引
    indexMethod(index) {
      return index + 1;
    },
    // 操作点击按钮
    handleEditFn(scope, item) {
      if (typeof item.cb != "function") {
        console.error("缺少按钮回调参数");
        return false;
      }
      item.cb(scope);
    },
    // 分页器 - 当前条数
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    // 分页器 - 当前页数
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    // 合并单元格
    arraySpanMethod() {
      // console.log(row, column, rowIndex, columnIndex);
    },
  },
};
</script>
<style lang="scss" scoped>
.table_ {
  width: 100%;
  height: 100%;
  .Colorlass {
    color: #2478FF;
  }
  .block {
    text-align: right;
    margin-top: 22px;
  }
  ::v-deep .el-table .success-row {
    background: #fff5f5;
  }
}
</style>
  